<template>
  <div class="tree-list">
    <el-tree
      :data="list"
      node-key="id"
      default-expand-all
      :props="props"
      :expand-on-click-node="false"
      :filter-node-method="filterNode"
      ref="tree"
    >
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button
            v-if="btnAdd && node.label.indexOf('单元') == -1"
            type="primary"
            size="mini"
            @click="$emit('addRow', true, '添加子类', data, 0)"
          >
            添加子类
          </el-button>
          <el-button
            v-if="btnUpdate"
            type="success"
            size="mini"
            @click="$emit('addRow', true, '修改', data)"
          >
            修改
          </el-button>
          <el-button
            v-if="btnDelete"
            type="danger"
            size="mini"
            @click="$emit('delRow', data)"
          >
            删除
          </el-button>
        </span>
      </span>
    </el-tree>
  </div>
</template>


<script>
export default {
  props: {
    searchText: {
      type: String,
      default: "",
    },
    list: {
      type: Array,
      default: () => [],
    },
    btnAdd: {
      tyep: Boolean,
      default: true,
    },
    btnUpdate: {
      tyep: Boolean,
      default: true,
    },
    btnDelete: {
      tyep: Boolean,
      default: true,
    },
  },
  data() {
    return {
      props: {
        label: "name",
        children: "children",
      },
    };
  },
  methods: {
    filterNode(value, data) {
      console.log(value, data);
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
  },
  watch: {
    searchText(newVal) {
      this.$refs.tree.filter(newVal);
    },
  },
};
</script>
<style lang="less">
.el-tree-node__content {
  height: 40px;
}
</style>


<style lang="less">
.tree-list {
  width: 600px;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
</style>